<template>
  <div class="monitoring">
    <div class="monitoring_left">
      <div class="monitoring_left_top">
        <div class="monitoring_left_top_welcome">
          <p class="welcome_title">欢迎回来！ 金大涌</p>
          <div class="monitoring_left_top_welcome_content">
            <div
              class="monitoring_left_top_welcome_content_box"
              v-for="item in welcomeContent"
            >
              <div class="monitoring_left_top_welcome_content_box_img">
                <a-image :src="item.img" />
              </div>
              <div class="monitoring_left_top_welcome_content_box_statistic">
                <a-statistic
                  :title="item.title"
                  :value="item.value"
                  :precision="item.precision"
                  show-group-separator
                  animation
                  ><template #suffix> {{ item.suffix }}</template></a-statistic
                >
              </div>
            </div>
          </div>
        </div>

        <div class="monitoring_left_top_content">
          <div class="content_title">
            <span>内容数据折线图</span>
            <a-button type="text">查看更多</a-button>
          </div>
          <div class="content_category" ref="categoryRef"></div>
        </div>
      </div>
      <div class="monitoring_left_bottom">
        <div class="monitoring_left_bottom_left">
          <div class="content_title">
            <span>内容数据柱状图</span>
            <a-button type="text">查看更多</a-button>
          </div>
          <div class="content_bar" ref="barRef"></div>
        </div>

        <div class="monitoring_left_bottom_right">
          <div class="content_title">
            <span>内容数据饼图</span>
            <a-button type="text">查看更多</a-button>
          </div>
          <div class="content_pie" ref="pieRef"></div>
        </div>
      </div>
    </div>
    <div class="monitoring_right">
      <div class="monitoring_right_1">
        <!-- 快捷操作 -->
        <div class="content_title">
          <span>快捷操作</span>
          <a-button type="text">查看更多</a-button>
        </div>
        <div class="content_body">
          <div
            class="monitoring_icon"
            v-for="item in monitoringIcon"
            :key="item.text"
          >
            <i :class="['iconfont', item.icon]"></i>
            <span>{{ item.text }}</span>
          </div>
        </div>
        <!-- 最近访问 -->
        <div class="content_title">
          <span>最近访问</span>
          <a-button type="text">查看更多</a-button>
        </div>
        <div class="monitoring_visits">
          <div v-for="item in monitoringVisit" :key="item.text">
            <i :class="['iconfont', item.icon]"></i>
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
      <div class="monitoring_right_2">
        <a-carousel
          :auto-play="true"
          indicator-type="dot"
          show-arrow="hover"
          :style="{
            width: '100%',
            height: '250px',
          }"
        >
          <a-carousel-item v-for="(image, index) in images" :key="index">
            <img
              :src="image"
              :style="{
                width: '100%',
                height: '100%',
              }"
            />
          </a-carousel-item>
        </a-carousel>
      </div>
      <!-- 公告列表 -->
      <div class="monitoring_right_3">
        <div class="content_title">
          <span>公告</span>
          <a-button type="text">查看更多</a-button>
        </div>
        <a-list size="small" :max-height="162">
          <a-list-item v-for="(item, index) in announcementList" :key="index">
            <a-list-item-meta :description="item.description">
              <template #avatar>
                <a-avatar shape="square" :size="40">
                  <img :src="item.avatar" />
                </a-avatar>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </div>
      <!-- 帮助文档 -->
      <div class="monitoring_right_4">
        <div class="content_title">
          <span>帮助文档</span>
          <a-button type="text">查看更多</a-button>
        </div>
        <a-button
          type="dashed"
          class="monitoring_button"
          v-for="item in helpText"
          :key="item"
          >{{ item }}</a-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts/core";
import { BarChart, PieChart, LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  MarkPointComponent,
  MarkLineComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  PieChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent,
  MarkPointComponent,
  MarkLineComponent,
]);
import { reactive } from "vue";
export default {
  setup() {
    // 欢迎回来
    const welcomeContent = reactive([
      {
        img: "https://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image",
        title: "线上总内容",
        value: 373.5,
        precision: 1,
        suffix: "W+ 个",
      },
      {
        img: "https://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image",
        title: "投放中内容",
        value: 368,
        precision: 0,
        suffix: "个",
      },
      {
        img: "https://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image",
        title: "日新增评论",
        value: 8874,
        precision: 0,
        suffix: "个",
      },
      {
        img: "https://p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image",
        title: "较昨日新增",
        value: 2.8,
        precision: 1,
        suffix: "%",
      },
    ]);
    const images = [
      "../../../../public/img1.png",
      "../../../../public/img3.png",
      "../../../../public/img2.png",
      "../../../../public/img4.png",
    ];
    // 快捷操作
    const monitoringIcon = [
      { text: "内容管理", icon: "icon-fankui" },
      { text: "内容分析", icon: "icon-gupiao" },
      { text: "高级管理", icon: "icon-huiyi" },
      { text: "线上推广", icon: "icon-xiaoxizhongxin1" },
      { text: "内容投放", icon: "icon-remen" },
    ];
    // 最近访问
    const monitoringVisit = [
      { text: "内容管理", icon: "icon-fankui" },
      { text: "内容分析", icon: "icon-gupiao" },
      { text: "高级管理", icon: "icon-huiyi" },
    ];
    // 公告列表
    const announcementList = [
      {
        description: "阳光开朗大男孩",
        avatar: "../../../../public/img1.png",
      },

      {
        description: "肯德基疯狂星期四！",
        avatar: "../../../../public/img3.png",
      },

      {
        description: "但是今天星期三",
        avatar: "../../../../public/img2.png",
      },

      {
        description: "布响丸辣！！",
        avatar: "../../../../public/img4.png",
      },
    ];
    // 帮助文档
    const helpText = ["产品概要", "使用指南", "接入流程", "接口文档"];
    return {
      welcomeContent,
      images,
      monitoringIcon,
      announcementList,
      monitoringVisit,
      helpText,
    };
  },
  mounted() {
    const setEcharts = (
      target,
      xType,
      xData = [],
      Xshow,
      Tooltrigger,
      ToolShowContent = true,
      Yshow,
      series = []
    ) => {
      target.setOption({
        xAxis: {
          type: xType,
          data: xData,
          show: Xshow,
        },
        tooltip: {
          trigger: Tooltrigger,
          showContent: ToolShowContent,
        },
        yAxis: {
          type: "value",
          show: Yshow,
        },
        series: series,
      });
    };
    const Data = [
      "2023-02-17",
      "2023-02-18",
      "2023-02-19",
      "2023-02-20",
      "2023-02-21",
      "2023-02-22",
      "2023-02-23",
      "2023-02-24",
    ];
    const category = echarts.init(this.$refs.categoryRef);
    const categorySerise = [
      {
        name: "总内容量",
        data: [580000, 810000, 600000, 942220, 777777, 439643, 114514, 555555],
        type: "line",
        step: "start",
      },
    ];
    setEcharts(
      category,
      "category",
      Data,
      true,
      "axis",
      true,
      true,
      categorySerise
    );

    const bar = echarts.init(this.$refs.barRef);
    const barSerise = [
      {
        name: "总内容量",
        data: [580000, 810000, 600000, 942220, 777777, 439643, 114514, 555555],
        type: "bar",
        itemStyle: {
          color: "rgb(32, 192, 255)",
        },
        emphasis: {
          itemStyle: {
            color: "orange",
          },
        },
      },
    ];
    setEcharts(bar, null, Data, true, "bar", true, true, barSerise);

    const pie = echarts.init(this.$refs.pieRef);
    const pieSerise = [
      {
        name: "总内容量",
        type: "pie",
        radius: ["40%", "70%"],
        data: [
          { value: 580000, name: "2023-02-17" },
          { value: 810000, name: "2023-02-18" },
          { value: 600000, name: "2023-02-19" },
          { value: 942220, name: "2023-02-20" },
          { value: 777777, name: "2023-02-21" },
          { value: 439643, name: "2023-02-22" },
          { value: 114514, name: "2023-02-23" },
          { value: 555555, name: "2023-02-24" },
        ],
        label: {
          show: true,
        },
      },
    ];
    setEcharts(pie, null, null, false, "pie", null, false, pieSerise);
  },
};
</script>
<style scoped lang="scss">
.monitoring {
  display: flex;
  justify-content: space-between;
  min-width: 1100px;
  &_left {
    width: 793px;
    background: #fff;
    display: flex;
    flex-direction: column;
    &_top {
      width: 100%;
      height: 636px;
      &_welcome_content {
        width: 100%;
        height: 195px;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        &_box {
          width: 50%;
          height: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          &_img {
            margin-right: 20px;
            background: rgb(23, 23, 235, 0.2);
            border-radius: 50%;
          }
          &_statistic {
            width: 100px;
          }
        }
      }
    }
    &_bottom {
      margin-top: 20px;
      height: 395px;
      width: 100%;
      background: #fff;
      display: flex;
      justify-content: space-between;

      div {
        width: 100%;
        background: #fff;
      }
    }
  }
  &_right {
    width: 280px;

    &_1 {
      height: 363px;
    }

    &_2 {
      height: 250px;
    }

    &_3 {
      height: 212px;
    }

    &_4 {
      height: 166px;
    }
  }
}
.monitoring_right > div {
  width: 100%;
  background: #fff;
  margin-bottom: 20px;
}
.content_title {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.content_category {
  width: 100%;
  height: 345px;
  // background: yellow;
}
.content_bar,
.content_pie {
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  height: 343px;
  background: #fff;
}
.welcome_title {
  padding: 10px;
  box-sizing: border-box;
}
.content_body {
  display: flex;
  flex-wrap: wrap;
  height: 175px;
}
.monitoring_icon {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 33.33%;
  height: 50%;
  cursor: pointer;
  color: rgb(78, 89, 105);
}
.iconfont {
  font-size: 24px;
}
.monitoring_icon:hover {
  color: blue;
}
.monitoring_visits {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 83px;
  div {
    height: 100%;
    width: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    color: rgb(78, 89, 105);
  }
  div:hover {
    color: blue;
  }
}
.monitoring_button {
  width: 40%;
  margin: 10px;
}
</style>
